<template>
	<view class="uni-popup-dialog">
		<view class="uni-dialog-title">
			<image src="../../static/icon/close.png" class="close" @click="close"></image>
			<text class="uni-dialog-title-text" :class="['uni-popup__' + dialogType]">成果置顶</text>
		</view>
		<view class="uni-dialog-content">
			<view class="paddingtb20 wram">
				规则说明
			</view>
			<view class=" paylist"   :key='index'>
				<view class="paystyle flex-row flex-between">
					<view class="labelLeft" :class="status==index?'active':''" v-for="(item,index) in list" :key='index'  @click="getindex(index,item.amount)">
						<view class=""> 置顶{{item.day}}日</view>
						<view class="yell">
							<text class="font40 ">{{item.amount}}</text> 
							<text class="font28 ">元</text>
						</view>
						<view class="font24 color9">让专利更快售出</view>
					</view>
				</view>
			</view>
			<view class="wram color9 font24">温馨提示：当前成果置顶时限剩余 <text class="yell">{{dayNum}}</text>天</view>
			<view  style="padding: 20upx; 0"></view>
			<button type="default" @click="pay">去支付</button>
			
		</view>
		
	</view>
</template>

<script>


export default {
	props:['patentId'],
	name: '',
	data() {
		return {
			dialogType: 'info',
			focus: false,
			val: '',
			status:-1,
			dayNum:'',
			list:[],
			index:'',
			money:''
		};
	},
	inject: ['popup'],
	
	created() {
		// 对话框遮罩不可点击
		this.popup.mkclick = false;
		if (this.mode === 'input') {
			this.dialogType = 'info';
			this.val = this.value;
		} else {
			// this.dialogType = this.type;
		}
	},
	mounted() {
		this.focus = true;
		this.getlist()
		let params = {
			patentId:this.patentId
		}
		
		
		
		
	},
	methods: {
		getlist(){
			this.$http.get('/myPatent/getTopPackage',{patentId:this.patentId}).then(res => {
				if (res.code == '0') {
					console.log(res.data)
					
					this.list = res.data.topPackage
					this.dayNum = res.data.dayNum
					
				}
			});
		},
		getindex(index,money){
			this.status = index
			this.money = money
			console.log(index)
		},
		/**
		 * 点击确认按钮
		 */
		onOk() {
			this.$emit(
				'confirm',
				() => {
					this.popup.close();
					if (this.mode === 'input') this.val = this.value;
				},
				this.mode === 'input' ? this.val : ''
			);
		},
		
		pay(){
			if(this.status==-1){
				uni.showToast({
					title:'请选择置顶套餐',
					icon:'none'
				})
				return
			}
			this.$emit('close', () => {
				this.popup.close();
			});
			this.$emit('gopay', {money:this.money,topType:this.status})
		
			// this.popup.close();
			
		},
		/**
		 * 点击取消按钮
		 */
		close() {
			if (this.beforeClose) {
				this.$emit('close', () => {
					this.popup.close();
				});
				return;
			}
			this.popup.close();
		},
		checkAppio() {
			uni.navigateTo({
				url: '/pages/home/search'
			});
		},
		toPingjia(type){
			uni.navigateTo({
				url:`/pages/home/result?type=${type}&patentId=${this.patentId}&patentName=${this.info.patentName}`
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	button{
		width: 90%;
		height: 80upx;
		line-height: 80upx;
		background: rgba(253, 88, 10, 1);
		border-radius: 8upx;
		color: #fff;
		font-size: 34upx;
		text-align: center;
	}
.uni-popup-dialog {
	width: 100%;
	border-radius: 15px 15px 0 0;
	background-color: #fff;
	// padding: 0 0 40upx 0;
	// padding-bottom: 140upx;
}

.uni-dialog-title {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: center;
	padding-top: 15px;
	padding-bottom: 5px;
	text-align: center;
	position: relative;
	image.close {
		position: absolute;
		width: 40upx;
		right: 20upx;
		top: 20upx;
		height: 40upx;
	}
}
.confirmBtn {
	position: fixed;
	left: 0;
	bottom: 0;
	background: #fff;
	width: 690upx;
	padding: 30upx;
	font-size: 30upx;
	color: #22222a;
	text {
		color: #fd580a;
		font-size: 48upx;
		font-weight: bold;
		&.dw {
			font-size: 28upx;
			padding-left: 16upx;
		}
	}
	
}

.uni-dialog-title-text {
	font-size: 32upx;
	font-weight: bold;
}

.uni-dialog-content {
	padding: 26upx 0upx 0;
	.tp{
		padding: 30upx;
		background:rgba(255,223,208,1);
		font-size: 24upx;
		color: #22222A;
		.names{
			color: #FD580A;
		}
		.nums{
			color: #38D214;
		}
		.uvip{
			color: #FD580A;
		}
		.tpText{
			line-height: 38upx;
		}
		.buyVip{
			// width:114upx;
			// height:40upx;
			padding: 5upx 10upx;
			background:rgba(253,88,10,1);
			border-radius:8upx;
			font-size: 22upx;
			color: #fff;
			// line-height: 40upx;
			// text-align: center;
		}
	}
	.wram{
		padding: 20upx 30upx;
		
	}
	.paylist {
		
		padding: 35upx 0;
		margin:0 35upx;
		.paystyle {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.labelLeft {
				width: 30%;
				border-radius: 20upx;
				text-align: left;
				border:1px solid #D0E9FD;
				padding: 20upx 1%;
				text-align: center;
				
			}
			.labelLeft &:nth-child(2){
				margin: 0 2%;
			}
			.labelLeft.active{
				border:1px solid #38D214;
			}
			
			
			
		}
		
	}
}

.uni-dialog-content-text {
	font-size: 29upx;
	color: #22222a;
}

.uni-dialog-button-group {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	border-top-color: #f5f5f5;
	border-top-style: solid;
	border-top-width: 1px;
}

.uni-dialog-button {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */

	flex: 1;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 45px;
}

.uni-border-left {
	border-left-color: #f0f0f0;
	border-left-style: solid;
	border-left-width: 1px;
}

.uni-dialog-button-text {
	font-size: 32upx;
}

.uni-button-color {
	color: #fe590b;
}

.uni-button-cancel {
	color: #9a9a9a;
}

.uni-dialog-input {
	flex: 1;
	font-size: 14px;
}

.uni-popup__success {
	color: $uni-color-success;
}

.uni-popup__warn {
	color: $uni-color-warning;
}

.uni-popup__error {
	color: $uni-color-error;
}

.uni-popup__info {
	color: #22222a;
}
</style>
